<template>
    <div class="body">
        <p v-show="isShow">暂无订单！</p>

        <div id="box" class="mescroll" v-for="(item, index) in orderlist" :key="item.id">

            <div class="list">
                <div class="item wow">
                    <div class="content">
                        <span>消费描述：会员充值</span>&nbsp;&nbsp;<span class="brown">{{
                            item.total ? '套餐' + item.vipid + '&nbsp' + '￥' + item.total : '会员充值' }}</span>
                    </div>
                    <div class="time">
                        <span>消费时间：{{ item.createtime_text }}</span>
                    </div>
                    <div class="">
                        <span :class="item.auto === '0' ? 'green' : 'brown'">{{ item.auto === '0' ? '待审核' :
                            item.outcome }}</span>
                    </div>
                </div>
                <button class="del" @click="delOrder(item.id)">删除</button>
            </div>
        </div>

    </div>
</template>

<script setup>
const { proxy } = getCurrentInstance()
const bisiness = ref(proxy.$business.value)
const orderlist = ref([])
const isShow = ref(false)

onMounted(() => {
    getOrderlist()
})

const getOrderlist = async () => {
    const res = await proxy.$http.post({
        url: '/order/getorder',
        params: {
            id: bisiness.value.id
        }
    })

    if (res.code == 1) {
        orderlist.value = res.data
    } else {
        proxy.$fail(res.msg)
        isShow.value = true
    }
}

// 删除
const delOrder = async (id) => {
    proxy.$confirm({
        title: '删除订单',
        message: '确定删除订单吗？'
    }).then(async () => {
        const res = await proxy.$http.post({
            url: '/order/delorder',
            params: {
                id: id
            }
        })
        if (res.code == 1) {
            proxy.$success(res.msg)
            getOrderlist()
        } else {
            proxy.$fail(res.msg)
        }
    }).catch(() => {
        proxy.$toast('已取消')
    })
}

</script>

<style>
/* 样式引入public下面的css */
@import url('@/assets/css/record.css');

.brown {
    color: brown;
}

.green {
    color: green;
}

.body {
    width: 100%;
    max-width: 800px;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    text-align: center;
}

.list {
    position: relative;
}

.del {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 10%;
    padding: 5px 10px;
    background-color: brown;
    border: none;
    border-radius: 5px;
}

.del:hover {
    background-color: rgb(130, 40, 40);
}
</style>
